<template>
  <div class="wang-editor">
    <div class="header-form">
      <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
        <el-form-item label="文章标题">
          <el-input v-model="sizeForm.name" />
        </el-form-item>
        <el-form-item label="文章类型">
          <el-select v-model="sizeForm.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <h4>文章详情：</h4>
    <WangEditor ref="wangedit" :myhtml="sizeForm.myhtml" my-mode="simple" @sendHtml="handleReciveHtml" />
    <el-button type="success" style="margin:10px" @click="handleSave">表单提交</el-button>

  </div>
</template>

<script>
import WangEditor from '@/components/WangEditor/index.vue'
import { getHtml } from '@/api/upload'
export default {
  name: 'MyWangEditor',
  components: {
    WangEditor
  },
  data() {
    return {

      sizeForm: {
        name: 'zs',
        region: '区域二',
        myhtml: ''
      }
    }
  },

  mounted() {
    getHtml().then(res => {
      this.sizeForm.myhtml = res.data.html
    })
  },
  methods: {
    // 接收子组件富文本
    handleReciveHtml(html) {
      // console.log('html555', html)
      this.sizeForm.myhtml = html
    },
    // 提交表单
    handleSave() {
      this.$refs.wangedit.sendChildHtml()
      this.$notify({
        title: '表单内容',
        message: this.sizeForm
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wang-editor{
    padding: 10px 20px;
    .header-form{
      width: 60%;
    }
  }
</style>

